<template>
  <div style="margin-top: 20px;">
    <!--    新闻区域-->
    <div style="background-color: white;width: 1400px;margin: 0 auto;padding-bottom: 30px;padding-top: 30px;">
      <div style="text-align: center">
        <span style="font-size: 30px;font-weight: bolder">{{ detail.title }}</span>
      </div>
      <div style="float: right;margin-right: 50px;margin-top: 20px">
        <span>发布时间：{{ detail.createAt | formatTime }}</span>
      </div>
      <div style="width: 800px;margin: 50px auto;" class="richText">
        <p v-html="detail.content" />
      </div>
      <div class="not_has_more" />
      <div style="margin-top: 100px;margin-left: 250px">
        <span style="font-size: 20px;font-weight: bolder">发表评论:</span>
      </div>
      <div style="margin: 20px auto;width: 800px;">
        <div style="display: flex">
          <div style="margin: auto 25px" class="demo-type">
            <el-avatar :size="60" :src="loginerIcon" />
          </div>
          <el-input
            v-model="commentBody.content"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            @input="inputChange"
          />
        </div>
        <el-button style="float: right;margin-top: 10px" type="primary" :disabled="enabledPublish" @click="publishComment">发表</el-button>
      </div>

      <div style="margin-top: 50px;margin-left: 250px">
        <span style="font-size: 20px;font-weight: bolder">评论列表:</span>
      </div>

      <div style="margin: 20px auto;width: 800px;">
        <div v-for="(item, index) in commentList" :key="index" style="margin-bottom: 25px;">
          <div style="display: flex">
            <div style="margin: auto 25px" class="demo-type">
              <el-avatar :size="60" :src="item.user.tAccount.icon" />
            </div>
            <div>
              <div style="font-weight: bolder;margin-top: 10px">{{ item.user.name }}</div>
              <div style="margin-top: 8px">{{ item.content }}</div>
            </div>
          </div>
          <div style="margin-left: 110px">
            <span style="font-size: 12px;color: #8c939d">{{ item.createAt | formatTime }}</span>
          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<script>

import { getDetails } from '@/api/new'
import { parseTime } from '@/utils'
import { addComment, getCommentListById } from '@/api/comment'

export default {
  filters: {
    formatTime(time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}')
    }
  },
  data() {
    return {
      detail: {
        title: '',
        content: '',
        createAt: ''
      },
      enabledPublish: true, // 按钮是否可用
      pinglun: '',
      commentBody: { // 评论实体
        content: '',
        beCommentedId: '',
        parentId: null,
        replyUserId: null
      },
      commentList: [],
      loginerIcon: '' // 登录人头像url
    }
  },
  created() {
    this.getDetailById(this.$route.query.id)
    this.getCommentList()
    this.commentBody.beCommentedId = this.$route.query.id
    this.loginerIcon = localStorage.getItem('icon')
  },
  methods: {
    getDetailById(id) { // 根据id查看新闻资讯详情
      getDetails(id).then(res => {
        this.detail = res.data
      })
    },
    publishComment() { // 发布评论
      addComment(this.commentBody).then(res => {
        this.$message.success('评论成功！')
        this.commentBody.content = ''
        this.getCommentList()
      })
    },
    inputChange() { // 按钮可编辑处理函数
      this.enabledPublish = this.commentBody.content.length === 0
    },
    getCommentList() { // 获取评论列表
      getCommentListById(this.$route.query.id).then(res => {
        this.commentList = res.data
      })
    }
  }
}
</script>

<style lang="scss">
.richText {
  img {
    max-width: 90%;
    margin: 0 auto;
  }
}

.not_has_more {
  text-align: center;
  position: relative;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: rgba(140, 142, 165, 1);
  &::after,
  &::before {
    position: absolute;
    width: 700px;
    height: 0.5px;
    background: #dadada;
    content: '';
  }
  &::after {
    left: 0%;
  }
  &::before {
    right: 0%;
  }
}
.el-textarea__inner{
  background-color: #f5f5f6;
}
.backButton{
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  position: fixed;
  top: 90px;
  left: 100px;
  z-index: 9;
}
</style>
